<script setup>
import { ref, onMounted } from "vue";
import { CMDService } from "../../bindings/generate-iot-cmd/internal/cmds";
// import {Events} from "@wailsio/runtime";

const addressCfg = ref({});
const addressIdx = ref([]);
const interval = ref(5000);
const maxCount = ref(60);
const sn = ref("");
const fileContent = ref("");
// const time = ref('Listening for Time event...')

const newAddress = ref("");
const newCmdGroup = ref("");

const addNewIOT = () => {
  if (newAddress.value === "") {
    alert("地址不能为空");
    return;
  }
  if (newCmdGroup.value === "") {
    alert("命令组不能为空");
    return;
  }
  newCmdGroup.value = newCmdGroup.value.replaceAll(" ", "").replaceAll("，", ",");
  let idx = addressIdx.value.indexOf(newAddress.value);
  if (idx < 0) {
    addressIdx.value.push(newAddress.value);
  }
  addressCfg.value[newAddress.value] = newCmdGroup.value.split(",");
};

const deleteIOT = (key) => {
  let idx = addressIdx.value.indexOf(key);
  if (idx > -1) {
    addressIdx.value.splice(idx, 1);
  }
  delete addressCfg.value[key];
};

const generateContent = () => {
  // todo: 处理addressCfg
  CMDService.NewIOTCmd(
    addressIdx.value,
    addressCfg.value,
    Number(interval.value),
    Number(maxCount.value),
    String(sn.value)
  )
    .then((resultValue) => {
      console.log(resultValue);
    })
    .catch((err) => {
      console.log(err);
    });

  // 生成预览内容
  CMDService.GetCmdFileContent()
    .then((resultValue) => {
      fileContent.value = resultValue;
    })
    .catch((err) => {
      console.log(err);
    });
};

const generateFile = () => {
  // let localContent = content.value;
  CMDService.GenerateCmdTxT(fileContent.value)
    .then((err) => {
      console.log(err);
    })
    .catch((err) => {
      console.log(err);
    });
};

onMounted(() => {
});

defineProps({
  msg: String,
});
</script>

<template>
  <div class="cmd-container">
    <div class="config-area flex-1 flex flex-col">
      <p class="mb-[5px]">配置脚本</p>
      <div class="input-area flex">
        <label class="config-label" for="sn">SN</label>
        <input class="border flex-1 " type="text" v-model="sn" />
      </div>
      <div class="input-area flex">
        <label class="config-label">间隔时间</label>
        <input class="border flex-1 " type="text" v-model="interval" />
        <label class="config-label">最大计数</label>
        <input class="border flex-1 " type="text" v-model="maxCount" />
      </div>
      <p class="text-left">
        {{ "当前发送一轮的时间:" + (interval * maxCount) / 1000 / 60 + "分钟" }}
      </p>

      <div class="add-iot flex-1 pt-[10px] max-h-[450px] overflow-auto">
        <div class="flex justify-between pb-[5px]" v-for="(key) in addressIdx" :key="key">
          <p>
            {{ "地址:" + key + " 命令组:" + addressCfg[key].join(",") }}
          </p>
          <button class="bg-red-200 ml-[10px]" @click="deleteIOT(key)">
            删除
          </button>
        </div>

      </div>

      <div class="new-iot flex pt-[10px]">
        <label class="config-label">地址</label>
        <input class="border w-[60px] mx-[10px]" type="text" v-model="newAddress" placeholder="例:01" />
        <label class="config-label">命令组</label>
        <input class="border flex-1 mx-[10px]" type="text" v-model="newCmdGroup" placeholder="命令不包含crc和地址,以英文逗号分隔" />
        <button class="bg-green-200 ml-[10px]" @click="addNewIOT">
          添加
        </button>
      </div>

      <div class="btn-area flex pt-[10px]">
        <button class="flex-1 bg-sky-300" @click="generateContent">
          脚本内容预览
        </button>
        <button class="flex-1 bg-sky-300 ml-[10px]" @click="generateFile">
          生成脚本文件
        </button>
      </div>
    </div>
    <div class="preview-area flex-1 flex flex-col">
      <p class="mb-[5px]">预览</p>
      <textarea class="border flex-1" v-model="fileContent" cols="60"></textarea>
    </div>
  </div>
</template>

<style scoped>
.cmd-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-height: 600px;
  min-width: 1200px;
}

.config-area {
  padding: 0 10px;
}

.input-area {
  margin-bottom: 10px;
  text-align: left;
}

.config-label {
  @apply inline-block w-[70px] leading-[30px] text-left
}

.input-area input {
  margin-right: 10px;
  margin-left: 10px;
}

.preview-area {
  padding: 0 10px;
}
</style>
